<template>
	<conf-module-container ref="refConfModuleContainer" class="new-box-add">
		<template #Slot-Conf-Module-Header>
			<global-svg-icon
				icon-name="return"
				width="18px"
				height="18px"
				class="header-icon"
				style="margin-right: 8px; cursor: pointer"
				@click="router.go(-1)"
			></global-svg-icon>
			<p class="font-20-bold bread-crumb-title" style="color: #f0f6fc">新增盒子</p>
		</template>

		<template #Slot-Conf-Module-Content>
			<div style="display: flex">
				<div class="the-alarm-notice-config">
					<div class="font-16-bold the-common-title">
						<global-svg-icon icon-name="config-title-tri" width="3px" height="18px" style="margin-right: 16px"></global-svg-icon>
						<div>新增盒子</div>
					</div>
					<div class="the-alarm-notice-form">
						<a-spin :spinning="formLoading">
							<a-form ref="formRef" :model="formData" name="alarm-notice" layout="vertical" :rules="addRules">
								<a-form-item name="ip" label="盒子IP地址" style="margin-top: -32px">
									<a-input v-model:value="formData.ip" placeholder="请输入接入盒子IP地址" style="width: 320px"></a-input>
								</a-form-item>
								<a-form-item name="port" label="盒子IP端口号">
									<a-input-number
										v-model:value="formData.port"
										type="number"
										:controls="false"
										placeholder="请输入接入盒子端口号"
									></a-input-number>
								</a-form-item>
								<a-form-item name="userName" label="盒子登录账号">
									<a-input v-model:value="formData.userName" placeholder="请输入接入盒子登陆账号" style="width: 320px"></a-input>
								</a-form-item>
								<a-form-item name="password" label="盒子登录密码">
									<a-input v-model:value="formData.password" placeholder="请输入接入盒子登陆密码" style="width: 320px"></a-input>
								</a-form-item>

								<a-form-item style="margin-top: 32px">
									<a-button type="primary" html-type="submit" class="form-button" :loading="loading" @click="addDeviceSubmit"
										>确定</a-button
									>
									<a-button @click="cancelModal">取消</a-button>
								</a-form-item>
							</a-form>
						</a-spin>
					</div>
				</div>
			</div>
		</template>
	</conf-module-container>
</template>

<script setup lang="ts" name="new-box-add">
// import { g6RegValidate } from 'glasssix-utils-ts';
// import { PlusOutlined } from '@ant-design/icons-vue';
import { VerifyForm } from '@/global-utils/check';
import { Rule } from 'ant-design-vue/es/form';
import { AddBoxManageApi } from '../../api';
import { ConfModuleContainer } from '../../components/index';
const $message: any = inject('$message');
const router = useRouter();
const formRef = ref();
const loading = ref<boolean>(false);
// 表单数据
const formLoading = ref<boolean>(false);

let formData = reactive<any>({
	ip: '',
	port: '',
	userName: '',
	password: ''
});

// RTSP正则
const addRules: Record<string, Rule[]> = {
	ip: [{ required: true, message: '请输入接入盒子IP地址', trigger: 'blur' }],
	port: [{ required: true, message: '请输入接入盒子端口号', trigger: 'blur' }],
	userName: [{ required: true, message: '请输入接入盒子登陆账号', trigger: 'blur' }],
	password: [{ required: true, message: '请输入接入盒子登陆密码', trigger: 'blur' }]
};

// ======================================================================

const cancelModal = (): void => {
	router.go(-1);
};
// 添加
const addDeviceSubmit = (): void => {
	VerifyForm(formRef, async () => {
		loading.value = true;
		try {
			// 接口
			let res: TsRes = await AddBoxManageApi.saveBoxInfo(formData);
			if (res.code === 0) {
				$message.success('保存成功');
				router.go(-1);
			}
		} finally {
			loading.value = false;
		}
	});
};
</script>

<style lang="less">
.new-box-add {
	.icon-close-circle-fill {
		color: @text03 !important;
	}

	.ant-input-affix-wrapper {
		border: 1px solid #2b3a50;
		background: transparent !important;
	}

	.ant-input-number {
		width: 320px;
		border: 1px solid #2b3a50;
		line-height: 36px;
		background-color: rgb(24, 31, 48);
	}

	.title {
		display: flex;
		font-size: 20px;
		font-weight: 700;
		font-style: normal;
		line-height: 28px; /* 140% */
		align-items: center;
		color: @text01;
	}

	.ant-form {
		.ant-form-item {
			.ant-form-item-label {
				margin-top: 32px;
			}
		}
	}

	.the-common-title {
		display: flex;
		margin-bottom: 16px;
		color: @text01;
		align-items: center;
	}

	.the-alarm-notice-config {
		margin: 0 auto 20px;

		.the-alarm-notice-form {
			width: 555px;
			border: @borderColor01;
			border-radius: 4px;
			padding: 20px 20px 40px;
			background: @background02;
			box-shadow: 0 40px 180px 0 rgba(0, 0, 0, 0.35);

			.form-button {
				margin-right: 8px;
			}

			.ant-checkbox-wrapper {
				margin-right: 16px;
				color: @text01;
			}

			.addBtn {
				font-size: 14px;
				font-weight: 400;
				line-height: 22px; /* 157.143% */
				color: @link01;
				cursor: pointer;

				&:hover {
					color: #679ff6;
					opacity: 0.85;
					cursor: pointer;
				}

				&:active {
					color: #2f6bcb;
					cursor: pointer;
				}
			}

			.ant-space {
				margin-bottom: 20px;
			}
		}
	}

	.server-information {
		width: 360px;
		height: 368px;
		margin: 40px 0 0 80px;

		.title {
			display: flex;
		}

		.server-info {
			height: 328px;
			border: 1px solid @borderColor02;
			border-radius: 4px;
			padding: 12px 20px;
			background: #101b2f;
			box-shadow: 0 40px 180px 0 rgba(0, 0, 0, 0.35);

			.server-item {
				border-bottom: 1px solid @borderColor02;
				padding: 12px 0;
				line-height: 22px;

				.label {
					margin-bottom: 8px;
					line-height: 22px;
					color: @text03;
				}

				.value {
					color: @text01;
				}
			}

			.server-item:last-child {
				border-bottom: none;
			}
		}
	}

	.tree-node-title {
		background: transparent !important;

		&:active {
			background: transparent !important;
		}
	}
}

:where(.css-dev-only-do-not-override-kqecok).ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected,
:where(.css-dev-only-do-not-override-kqecok).ant-tree .ant-tree-checkbox + span.ant-tree-node-selected {
	background-color: @background01 !important;
}
</style>
